<template>
  <el-dialog
    class="custom-dialog"
    :model-value="visible"
    :show-close="false"
    :width="widthLocal"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
    @close="cancel"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div :id="titleId" :class="titleClass">{{ title }}</div>
        <svg-icon
          icon-class="close-remove"
          class-name="dialog-close"
          color="#0073FF"
          @click="close"
        />
      </div>
    </template>
    <slot />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup #CustomDialog>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  width: {
    type: String || Number,
    default: "normal"
  }
});
const emit = defineEmits(["update:visible", "submit", "cancel"]);

const dialogWidth = {
  big: "80%",
  normal: "60%",
  small: "40%"
};
const widthLocal = computed(() => {
  return dialogWidth[props.width] || props.width;
});

const submit = () => {
  emit("submit");
};
const cancel = () => {
  emit("cancel");
  emit("update:visible", false);
};
</script>

<style lang="scss" scoped>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
.dialog-close {
  cursor: pointer;
}
</style>
